import { Button, Space, Table, Tag } from "antd";
import { ColumnsType } from "antd/lib/table";
import { useEffect, useState } from "react";
import { Resizable, ResizableProps } from "react-resizable";

import "./index.css";

const MessageCenter = () => {
  interface TableItem {
    key: string;
    name: string;
    age: number;
    address: string;
    tags: string[];
  }

  const deafaultColumns: ColumnsType<TableItem> = [
    {
      title: "Name",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "Age",
      dataIndex: "age",
      key: "age",
    },
    {
      title: "Address",
      dataIndex: "address",
      key: "address",
    },
    {
      title: "Tags",
      dataIndex: "tags",
      key: "tags",
      render: (tags: []) => (
        <>
          {tags.map((tag: string) => {
            let color = tag.length > 5 ? "geekblue" : "green";
            if (tag === "loser") {
              color = "volcano";
            }
            return (
              <Tag color={color} key={tag}>
                {tag.toUpperCase()}
              </Tag>
            );
          })}
        </>
      ),
    },
    {
      title: "Action",
      dataIndex: "action",
      render: (text: string, record: TableItem) => (
        <Space>
          <Button>Invite {record.name}</Button>
          <Button>Delete</Button>
        </Space>
      ),
    },
  ];

  const data: TableItem[] = [
    {
      key: "1",
      name: "John Brown",
      age: 32,
      address: "NewYork",
      tags: ["nice", "developer"],
    },
    {
      key: "2",
      name: "Jim Hreen",
      age: 42,
      address: "London",
      tags: ["loser"],
    },
    {
      key: "3",
      name: "Joe Black",
      age: 32,
      address: "Sidney",
      tags: ["cool", "teacher"],
    },
  ];

  const ResizeableTitle: React.FC<ResizableProps> = ({
    width,
    onResize,
    ...restProps
  }) => {
    if (!width) {
      return <th {...restProps} />;
    }

    return (
      <Resizable width={width} height={0} onResize={onResize}>
        <th {...restProps} />
      </Resizable>
    );
  };

  const [dcolumns, setDcolumns] = useState(deafaultColumns);
  const [components, setComponents] = useState({
    header: {
      cell: ResizeableTitle,
    },
  });

  useEffect(() => {
    setComponents({
      header: {
        cell: ResizeableTitle,
      },
    });
  }, []);

  const handleResize =
    (index: number) =>
    (e: MouseEvent, { size }: any) => {
      // console.log("e:", e, "\nsize:", size);
      const nextColumns = [...columns];
      nextColumns[index] = {
        ...nextColumns[index],
        width: size.width,
      };
      setDcolumns(nextColumns);
    };

  const columns: any = dcolumns.map((col, index) => ({
    ...col,
    onHeaderCell: () => ({
      width: col.width || 120,
      onResize: handleResize(index),
    }),
  }));

  return (
    <div>
      <h1>消息中心</h1>
      <Table components={components} columns={columns} dataSource={data} />
    </div>
  );
};

export { MessageCenter };
